<template>
    <div class="yv-select">
        <div style="text-align: left; " :class="{'yv-input-required':required}">{{ label }}</div>
        <div id="yv-select-box" ref="yvSelectBox">
            <div class="yv-select-box" @click="selectVisibleChange(undefined, $event)">{{ option.label }}</div>
        </div>
        <div class="yv-select-item-box" id="yv-select-item-box" ref="yvSelectItemBox" v-show="selectVisible">
            <div class="yv-select-item" id="yv-select-item" ref="yvSelectItem" v-for="(option, index) in options"
                @click="selected(option)" :key="index">
                <span class="yv-select-item-label">{{ option.label }}</span>
                <div class="yv-select-item-line"></div>
            </div>
            <span style="font-size: 8pt;">没有更多数据了 | Powered By 若雨 @ 3097411322</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'YvSelect',
    emit: ['update:modelValue'],
    props: {
        modelValue: {
            default: -1,
        },
        label: {
            type: String,
            default: '请选择',
        },
        required: {
            type: Boolean,
            default: false,
        },
        default: {
            default: null,
        },
        options: {
            default: [
                {
                    label: '请选择',
                    value: -1
                }
            ],
            type: Array
        }
    },
    data() {
        return {
            option: {
                label: '请选择',
                value: -1
            },
            realOption: [],
            selectVisible: false,
            vts: 0,
        }
    },
    watch: {
        options() {
            this.styleChange();
        }
    },
    created() {
        window.addEventListener('resize', this.styleChange);
        if (this.default != null) {
            let defaultOption = this.options.find(option => option.value == this.default);
            if (defaultOption) {
                this.option = defaultOption;
            }
        }
    },
    methods: {
        selected(option) {
            this.option = option;
            this.$emit('selected', option);
            this.$emit('update:modelValue', option.value);
        },
        selectVisibleChange(bool, e) {
            this.styleChange();
            this.selectVisible = bool ? bool : !this.selectVisible;
            // 点击其他地方时，隐藏下拉框
            if (this.selectVisible) {
                this.vts = e._vts;
                let that = this;
                function clickListener(e) {
                    if (e._vts != that.vts) {
                        that.selectVisibleChange(false, e);
                        document.removeEventListener('click', clickListener);
                    }
                }
                document.addEventListener('click', clickListener);
            }
        },
        styleChange() {
            this.$refs.yvSelectItemBox.style.width = this.$refs.yvSelectBox.clientWidth + 'px'
        }
    },
}
</script>

<style>
.yv-select {
    width: 100%;
    font-size: 12pt;
    color: rgb(73,73,73);
}

.yv-select-box {
    width: 100%;
    border: 0;
    background: rgba(0, 0, 0, .024);
    box-shadow: 1pt 0 1pt rgba(0, 0, 0, .2);
    border-bottom: 1pt solid rgba(0, 0, 0, .2);
    text-align: center;
    padding: 3pt 2pt;
    outline: none;
    border-radius: 6pt;
}

.yv-select-item-box {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4pt;
    background: white;
    width: max-content;
    text-align: center;
    max-height: 50vh;
    overflow-y: scroll;
    z-index: 1000000001;
    line-height: 24pt;
    max-height: 130pt;
}

.yv-select-item {
    cursor: pointer;
}

.yv-select-item-line {
    margin: 0 auto;
    width: 80%;
    overflow: hidden;
    border-bottom: 1pt solid rgba(0, 0, 0, .2);
}
</style>